import React from 'react';
import { Button, Col, Modal, Row, Collapse } from 'antd';
import styles from '../index.less';

export default class DetailModal extends React.Component {
  static defaultProps = {
    offDetail: () => {},
  };

  render() {
    const { detailModalFlag, detailInfo,offDetail } = this.props;
    return (
      <Modal
        title="Detail"
        width="60%"
        destroyOnClose
        visible={detailModalFlag}
        className={styles.modalBox}
        footer={
          <Button type="primary" onClick={()=>offDetail(false)}>
            OK
          </Button>
        }
        onCancel={()=>offDetail(false)}
      >
        <ul>
          <li>
            <p>Campaign Information</p>
            <Row>
              <Col span={6} className={styles.textRight}>
                Campaign Name
              </Col>
              <Col offset={1} span={4} className={styles.count}>
                {(detailInfo && detailInfo.campaignName) || '-'}
              </Col>
              <Col span={6} className={styles.textRight}>
                Redemption Period
              </Col>
              <Col offset={1} span={6} className={styles.count}>
                {(detailInfo && detailInfo.Period) || '-'}
              </Col>
            </Row>

            <Row>
              <Col span={6} className={styles.textRight}>
                SAS Campaign Code
              </Col>
              <Col offset={1} span={4} className={styles.count}>
                {(detailInfo && detailInfo.SAS) || '-'}
              </Col>
              <Col span={6} className={styles.textRight}>
                CMS Campaign Code
              </Col>
              <Col offset={1} span={6} className={styles.count}>
                {(detailInfo && detailInfo.CMS) || '-'}
              </Col>

            </Row>

            <Row>
              <Col span={6} className={styles.textRight}>
                Campaign Category
              </Col>
              <Col offset={1} span={4} className={styles.count}>
                {(detailInfo && detailInfo.Category) || '-'}
              </Col>
              <Col span={6} className={styles.textRight}>
                Campaign Type
              </Col>
              <Col offset={1} span={6} className={styles.count}>
                {(detailInfo && detailInfo.Type) || '-'}
              </Col>
            </Row>

            <Row>
              <Col span={6} className={styles.textRight}>
                Description
              </Col>
              <Col offset={1} span={4} className={styles.count}>
                {(detailInfo && detailInfo.Description) || '-'}
              </Col>
            </Row>
          </li>

          {detailInfo &&
          detailInfo.CMS && (
            <li>
              <p>Additional Information</p>
              <Row>
                <Col span={24}>
                  <Collapse bordered={false} accordion>
                    {detailInfo.packages &&
                    detailInfo.packages.map(item => (
                      <Collapse.Panel
                        style={{
                          border: '1PX solid #ddd',
                          marginTop: '4px',
                          borderRadius: '3px',
                        }}
                        header={`Package Description:${item.packageDesc}`}
                        key={item.packageId}
                      >
                        {item.benefits &&
                        item.benefits.length > 0 &&
                        item.benefits.map(ben => (
                          <Row>{`Benefit Description:${ben.benefitDesc}`}</Row>
                        ))}
                      </Collapse.Panel>
                    ))}
                  </Collapse>
                </Col>
              </Row>
            </li>
          )}
        </ul>
      </Modal>
    );
  }
}
